import RanDom from './RanDom'
export default class CreateAnimate {
    static init(node: HTMLElement) {
        CreateAnimate[node.className](node);
        node.style.left = `${RanDom.randomX()}px`;
        node.style.bottom = `-${window.innerHeight * 0.2}px`;
        return node;
    }
    private static Cube(node: HTMLElement) {
        let spend = 1;
        if (node !== null) {
            // const Txts: string = RanDom.randomTxt();
            // let i: number = 0;
            // const val = setInterval(() => {
            //     const txt = node.children[1].textContent;
            //     node.children[1].textContent = txt + Txts.charAt(i);
            //     if (i < Txts.length) {
            //         i++;
            //     } else {
            //         clearInterval(val);
            //     }
            // }, 300);

            const loop = function () {
                const btm = Number(node.style.bottom.replace('px', ''));
                node.style.bottom = `${btm + spend}px`;
                for (let i = 0; i < node.children[0].children.length; i++) {
                    const item: HTMLElement = node.children[0].children[i] as HTMLElement;
                    let value: RegExpMatchArray | null = item.style.transform.match(/\d+deg/g);
                    if (value !== null) {
                        value = value[0].match(/\d+/g);
                        if (value !== null) {
                            item.style.transform = item.style.transform.replace(/\d+deg/g, `${Number(value[0]) + spend}deg`);
                        }
                    }
                }
                if (btm < window.innerHeight) {
                    window.requestAnimationFrame(loop);
                } else {
                    node.remove();
                }
            }
            loop();
        }
    }
    private static Img(node: HTMLElement) {
        let spend = 1;
        if (node !== null) {
            const loop = function () {
                const btm = Number(node.style.bottom.replace('px', ''));
                node.style.bottom = `${btm + spend}px`;
                if (btm < window.innerHeight) {
                    window.requestAnimationFrame(loop);
                } else {
                    node.remove();
                }
            }
            loop();
        }
    }
    static setBG() {
        const arrs: string[] = ['1', '2', '3', '4', '5', '6', '7', '8', '9']
        const bg = `url(static/imgs/${arrs[Math.floor(Math.random() * arrs.length)]}.jpg)`;
        console.log(bg)
        document.body.style.backgroundSize = '0% 200%'
        document.body.style.background = bg;
        document.body.style.backgroundPositionY = '50%'
    }
}